<template>
  <div>
    <div style=" width: 100% ;padding: 15px 0;">
      <h1 style=" color: black;font-weight: bold ">市场活动</h1>
    </div>
    <!-- 表格 -->
    <el-table v-if="activities !== null" :data="activities" border style="width: 100%">
      <el-table-column prop="name" label="名称" width="150"></el-table-column>
      <el-table-column prop="startDate" label="开始日期" width="150"></el-table-column>
      <el-table-column prop="endDate" label="结束日期" width="150"></el-table-column>
      <el-table-column prop="owner" label="所有者" width="150"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="text" @click="removeActivity(scope.row.id)" size="small">解除关联</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加活动按钮 -->
    <el-button type="primary" @click="addActivity" style="margin-top: 10px;"
      @initActivity="initActivity">关联市场活动</el-button>
  </div>
  <activeList v-model="dialogVisible" :dialogVisible="dialogVisible" 
  :clueId="clueId" @initActivityList="initActivityList">
  </activeList>
</template>

<script setup>
import { ElButton, ElMessageBox,ElMessage } from 'element-plus'; // 引入 Element UI 按钮
import requestUtil, { getImageUrl } from "@/util/request";
import { defineEmits, defineProps, ref, watch ,defineExpose} from "vue" //引入Vue 3 Composition API
import activeList from './component/activityList.vue';
//父组件传递的数据
const props = defineProps(['clueId'])
//定义数据列表
const activities = ref([])
const initActivityList = async (clueId) => {
  const res = await requestUtil.getRestFulApi('crmClueActivityRelation/clueActivityRelation/{id}', { id: clueId })
  activities.value =  res.data.data
}

//弹框样式
const dialogVisible = ref(false)

// 删除活动
const removeActivity = async (index) => {
  const res = await requestUtil.getRestFulApi('crmClueActivityRelation/deleteClueActivityRelation/{id}', { id: index })
  if (res.data.code == 1) {
    ElMessage.success("执行成功！")
    initActivityList(props.clueId)
  } else {
    ElMessage.error(res.data.message);
  }
};

// 添加活动
const addActivity = () => {
  if (!Boolean(dialogVisible.value)) {
    dialogVisible.value = true
  }

};

defineExpose({initActivityList})
</script>


<style scoped>
h2 {
  margin-bottom: 10px;
}

.el-button {
  margin-top: 10px;
}
</style>